<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>系统登录</title>
  <!-- 下载并引入jquery easyUI -->
  <link rel="stylesheet" type="text/css"
        href="./js/jquery-easyui-1.7.0/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css"
        href="./js/jquery-easyui-1.7.0/themes/icon.css">
  <link rel="stylesheet" type="text/css"
        href="./js/jquery-easyui-1.7.0/themes/color.css">
  <script type="text/javascript"
          src="./js/jquery-easyui-1.7.0/jquery.min.js"></script>
  <script type="text/javascript"
          src="./js/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>

  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    body {
      background: #fff url("./images/subtle_grunge.png") 0 0;
      color: #46b8da;
    }

    h1 {
      color: rgb(128, 128, 128);
      text-align: center;
    }

    a:link, a:hover, a:visited, a:active {
      color: rgb(128, 128, 128);
      text-decoration: none;
    }

    form {
      width: 400px;
      min-width: 400px;
      position: absolute;
      left: 40%;
      top: 15%;
      margin: 0;
      padding: 30px;
      background-color: white;
      border: 2px solid rgba(128, 128, 128, 0.2);
      border-radius: 10px;
    }

    form div {
      margin-bottom: 10px;
    }
  </style>

</head>
<body>
<script type="text/javascript">
  if (window.top != window.self) {
    window.location = "./login.html";
  }
</script>

<form id="users_fm" method="post">
  <div>
    <h1>系统登录</h1>
  </div>
  <div>
    <input name="adminName" class="easyui-textbox"
           data-options="iconCls:'icon-man',iconWidth:30,iconAlign:'left',prompt:'用户名'"
           style="width: 100%; height: 35px;" required="true" />
  </div>
  <div>
    <input name="password" class="easyui-passwordbox"
           data-options="iconWidth:30,iconAlign:'left',prompt:'密码'"
           style="width: 100%; height: 35px;" required="true" />
  </div>
  <div>
    <input name="validate" class="easyui-textbox"
           data-options="iconCls:'icon-lock',iconWidth:30,iconAlign:'left',prompt:'验证码'"
           style="width: 100%; height: 35px;" required="true" />
    <img
            id="validateImage" style="cursor: pointer; margin: 3px;"
            src="./validatecode" alt="验证码"
            height="32px" width="80px" onclick="resetCode()">
  </div>
  <div>
    <input class="easyui-checkbox" label="记住密码" labelPosition="after"
           labelWidth="70" />
  </div>
  <div style="text-align: center;">

    <a href="#" id="loginbtn" style="width: 40%; height: 35px;"
       class="easyui-linkbutton" iconCls="icon-ok" onclick="login()">登陆</a>


    <a href="#" style="width: 40%; height: 35px; margin-left: 30px;"
       class="easyui-linkbutton" iconCls="icon-cancel"
       onclick="clearForm()">重置</a>

  </div>
  <div>
    <div style="display: inline;">
      <a href="javascript:void(0)">还未注册？</a>
    </div>
    <div style="display: inline; margin-left: 170px;">
      <a href="javascript:void(0)">忘记密码？</a>
    </div>
  </div>
</form>

<script type="text/javascript">
  function resetCode() {
    $("#validateImage").attr('src',"./validatecode?r="
            + new Date().getTime());
  }

  function clearForm() {
    $('#users_fm').form('reset');
  }
  function login() {
    //使用ajax进行提交，
    $('#users_fm').form('submit',
          {
            url : './sys/admin/login',
            onSubmit : function() {
              return $(this).form('validate');
            },
            success : function(result) {
              var result = eval('(' + result + ')');

              if(result.adminId){
                window.location.href = "./pages/index.html";
              }else{

                $.messager.show({
                  title : 'Error',
                  timeout : 2000,
                  msg : "登录失败"
                });
                $('#users_fm').form('reset');
                resetCode();
              }
            }
          });
  }
</script>
</body>
</html>